<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login with Email</title>
</head>
<body>
    <h2>Login with Email Verification</h2>
    <form id="loginForm" action="{% url 'email_login' %}" method="post">
        {% csrf_token %}
        <div>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" required>
            <button type="button" id="sendCodeBtn">Send Verification Code</button>
        </div>
        <div>
            <label for="code">Verification Code:</label>
            <input type="text" id="code" name="code" required>
        </div>
        <div>
            <button type="submit">Login</button>
        </div>
    </form>
    <script>
        document.getElementById('sendCodeBtn').addEventListener('click', function() {
            var email = document.getElementById('email').value;
            if (email) {
                // 发送请求到发送验证码的视图
                fetch('/send_verification_code/?email=' + email, {
                    method: 'GET',
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        alert('Verification code sent to your email.');
                    } else {
                        alert('Failed to send verification code.');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                });
            } else {
                alert('Please enter your email.');
            }
        });
    </script>
</body>
</html>
